<template>
  <div class="newindex-mian">
    <div class="kys-madestyle-body">
      <div class="kys-madestyle-swiper common-clearboth">
        <div class="kys-madestyle-swiper-left">
          <main class="banner">
            <el-carousel :interval="5000" arrow="always">
              <el-carousel-item
                v-for="item in pageData.bannerList"
                :key="item.advertImgID"
              >
                <a :href="'/'">
                  <img alt="" :src="item.imgAddr | imgCache(1000, 0)" />
                </a>
              </el-carousel-item>
            </el-carousel>
          </main>
        </div>
        <div class="kys-madestyle-swiper-right kys-madestyle-hover"
             style="border: 1px solid #e7e7e7;background: hsla(0, 0%, 0%, 0);">
          <div class="layui-form" >
<!--            <input class="kys-loginname layui-input" type="text" name="username" required=""-->
<!--                   lay-verify="required"      v-model="login" placeholder="请输入用户名" autocomplete="off">-->
<!--            <input class="kys-loginpwd layui-input" type="password" name="password" required=""-->
<!--                   lay-verify="required"  v-model="password" placeholder="请输入密码" autocomplete="off">-->
<!--            <el-input-->
<!--              v-model="login"-->
<!--              placeholder="请输入用户名或手机号4"-->
<!--            ></el-input>-->
<!--            <el-input-->
<!--              v-model="password"-->
<!--              type="password"-->
<!--              placeholder="请输入密码"-->
<!--            ></el-input>-->
<!--            <div class="kys-loginbtns">-->
<!--              <button type="primary" style="background: cornflowerblue" class="layui-btn layui-btn-primary" @click="doLogin">登录</button>-->
<!--              <a href="/register" class="layui-btn layui-btn-primary">注册</a>-->
<!--            </div>-->
            <input class="kys-loginname layui-input" type="text" name="username" required=""
                   lay-verify="required" placeholder="请输入用户名"  v-model="login" autocomplete="off">
            <input class="kys-loginpwd layui-input" type="password" name="password" required=""
                   lay-verify="required" placeholder="请输入密码" autocomplete="off"  v-model="password">
            <div class="kys-loginbtns">
              <button class="layui-btn" lay-submit="" lay-filter="login" @click="doLogin">登录</button>
              <a href="/register4" class="layui-btn layui-btn-primary">注册</a>
            </div>
            <p class="kys-loginbtns-forget"><a href="/forget">忘记密码？</a></p>
            <div class="kys-loginbtns-logins">
              <a :href="pageData.qq" target="_blank" ref="nofollow" class="qqlogin">
              </a>
              <a :href="pageData.wx" target="_blank" ref="nofollow" class="wxlogin">
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="kys-madestyle-news common-clearboth">
        <div class="kys-madestyle-news-left kys-madestyle-hover">
          <div class="kys-madestyle-news-left-header"> 系统公告 <a href="/notice">MORE &gt;</a>
          </div>
          <div class="kys-madestyle-news-left-body">
            <ul>
              <li
                v-for="item in pageData.noticeList"
                :key="item.systemNoticeID"
              >
                <a
                  :style="`color: ${item.color}`"
                  :href="`/notice/${item.systemNoticeID}`"
                >
            {{ item.systemNoticeTitle }}
                  <i >{{ item.createTime }}</i>
                </a>
              </li>

            </ul>
          </div>
        </div>
        <div class="kys-madestyle-news-right kys-madestyle-hover">
          <div class="kys-madestyle-news-right-header">
            <h2>联系客服</h2>
          </div>
          <div class="kys-madestyle-news-right-body">
            <div class="kys-contact-item">
              <p>客服 电话 ：{{ pageData.contact.frontServicePhone }}
              </p>
            </div>
            <div class="kys-contact-item">
              <p>业务 电话：{{ pageData.contact.frontWorkPhone }}
              </p>
            </div>
            <div class="kys-contact-item">
              <p>加款 电话：{{ pageData.contact.frontMoneyPhone }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="key-madestyle-links">
        <div class="kys-madestyle-news-left-header">友情链接</div>
        <div class="kys-madestyle-links-body common-clearboth">
          <a style="border:none"
            v-for="item in pageData.friends"
            :key="item.friendLinkID"
            :href="item.friendLinkAddr"
            rel="nofollow"
          >{{ item.friendLinkName }}</a>
        </div>
      </div>
    </div>
    <qqservice :qq-link="systemStyle.qqLink" :qun-link="systemStyle.qunLink" />

  </div>
</template>

<script>
import { mapState } from 'vuex'
import fixupMixin from '@/mixins/fixup'
import qqservice from './themes/qqservice'

export default {
  mixins: [fixupMixin],
  props: {
    pageData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      login: '',
      password: ''
    }
  },
  computed: {
    ...mapState({
      site: (state) => state.site,
      systemStyle: (state) => state.systemStyle
    })
  },
  mounted() {
    if (this.systemStyle.isQun == 1) {
      const iframe = document.createElement('iframe')
      iframe.src = this.systemStyle.qunLink + '?' + new Date().getTime()
      iframe.id = 'iframe'
      iframe.style = 'display:none'
      document.body.appendChild(iframe)
      setTimeout(function () {
        const a = document.getElementById('iframe')
        document.body.removeChild(a)
      }, 60000)
    }
    window.addEventListener('keydown', (event) => {
      const e = event || window.event
      if (e.keyCode === 13) {
        this.doLogin()
      }
    })
  },
  methods: {
    async doLogin() {
      const res = await this.$axios.post('/login/login/login', null, {
        params: {
          login: this.login,
          password: this.password
        },
        tokenUpdate: true
      })
      if (res.code === 1001) {
        await this.$store.dispatch('getUserExtend')
        console.log(this.systemStyle.goPage);
        if(this.systemStyle.goPage == null || this.systemStyle.goPage == 0){
          this.$router.push('/category-list')
        }else{
          this.$router.push('/category-list')
        }
      }
    },
  },
  components: {
    qqservice
  }
}
</script>


<style lang="scss" scoped>
// @import 'assets/style/layer.css';
// @import 'assets/style/layui.css';
// @import 'assets/style/style1/common.css';
// @import 'assets/style/style1/openlogin.css';
// @import 'assets/style/style1/style.css';
// @import 'assets/style/style1/font_1451715_0505c2bxv7b7.css';
// @import 'element-ui/lib/theme-chalk/index.css';
.newindex-mian {
  margin: 0 auto;
}
</style>
